<template>
  <div>
    <group label-width="100px" label-margin-right="15px" label-align="left">
      <x-input title='手机号码:' placeholder="请输入手机号码" is-type="china-mobile" keyboard="number"
               v-model="userInfo.phoneNumber" required></x-input>
      <x-input title='密码:' type="password" placeholder="请输入密码" v-model="userInfo.passWord" required></x-input>
      <x-input title="验证码:" class="weui-cell_vcode" v-model="verCode" required novalidate :icon-type="iconType">
        <img slot="right" class="weui-vcode-img" :src="verCodeData" @click="getverCode" alt="看不清，换一张" style="width: 140px; height: 42px;">
      </x-input>
    </group>
    <div class="btn-box" style="margin-top: 30px;">
      <x-button type="primary" @click.native="goLogin">登录</x-button>
    </div>
    <div class="register">
      <router-link to="/forget">忘记密码</router-link>
      |
      <router-link to="/register">立即注册</router-link>
    </div>
    <div v-transfer-dom>
      <alert v-model="alertShow" title="提示"> {{ alertMessage }}</alert>
    </div>
    <toast v-model="showPositionValue" type="cancel" :text="toastText" width="10em"></toast>
  </div>
</template>
<script type="text/ecmascript-6">
  import {XInput, XButton, Group, Icon, Alert, Toast, TransferDomDirective as TransferDom} from 'vux'
  import Guid from './js/guid'
  import getSource from './js/getSource'
  export default {
    data(){
      return {
        iconType: '',
        verCodeData: '',
        verCode: "",
        vguid: '',
        userInfo: {
          phoneNumber: '',
          passWord: '',
          openId: localStorage.getItem('openId'),
          source: "",
          genGuid: ""
        },
        alertShow: false,
        alertMessage: '',
        toastText: '',
        showPositionValue: false
      }
    },
    created() {
      this.getverCode();
      this.userInfo.source = getSource();
    },
    watch: {
      verCode: function (newValue, oldValue) {
        let _self = this;
        let apiurl = global.baseApiUrl + "/base/captcha/verify/" + _self.vguid + '/' + this.verCode;
        this.axios.post(apiurl).then(function (res) {
          if (res.data.succ == true) {
            _self.iconType = 'success'
          } else {
            _self.iconType = 'error'
          }
        })
      }
    },
    methods: {

      goLogin(){
        if (this.userInfo.phoneNumber.trim() == "" || this.userInfo.passWord == "") {// 暂时去掉验证码|| this.verCode == ""
          this.alertShow = true;
          this.alertMessage = '用户名或密码或验证码不能为空！';
          return false;
        }
        let _self = this;
        this.axios({
          method: 'post',
          url: global.webChatApiUrl + '/user/login',
          data: {
            accountId: _self.userInfo.phoneNumber,
            password: _self.userInfo.passWord,
            source: _self.userInfo.source,
            genGuid: _self.vguid,//随机数
            verCode: _self.verCode,//验证码
            openId: _self.userInfo.openId
          }
        })
          .then(function (response) {
            _self.getverCode();
            if (!_self.userInfo.phoneNumber && !_self.userInfo.passWord) {
              return;
            } else {
              var res = response.data;
              //console.info(res);
              if (res.code == 212001 && res.succ) {
                let d = res.data;

                _self.alertShow = true;
                _self.alertMessage = '登录成功！';
                //写入用户信息到store
                _self.$store.dispatch("userSignin", {
                  guid: d.guid,
                  accountId: d.accountId,
                  realName: d.realName,
                  openId: d.wxOpenId,
                  memberStatus: d.memberStatus  //实名认证
                });
                setTimeout(function () {
                  _self.$router.replace({path: '/user'}); //登录成功2s后，则跳转到主页
                }, 2000)
              } else {
                _self.showMsg(res.msg);
                _self.verCode = '';
                _self.iconType = '';
              }
            }
          })
          .catch(function (response) {
            console.log(response);
          });
      },
      //获取图片验证码
      getverCode: function () {
        let _self = this;
        _self.vguid = new Guid().newGUID();
        var apiurl = global.baseApiUrl + '/member/vercode/' + _self.vguid;
        //console.log('apiurl:' + apiurl);
        this.axios({
          method: 'post',
          url: apiurl
        }).then(function (response) {
            console.log(response.data);
          _self.verCodeData = "data:image/png;base64," + response.data.data;
        }).catch(function (response) {
        });
      },
      showMsg (msg) {
        this.showPositionValue = true;
        this.toastText = msg;
      }
    },
    components: {
      XInput,
      XButton,
      Group,
      Icon,
      Alert,
      Toast
    },
    directives: {
      TransferDom
    }
  }

</script>
<style rel="stylesheet/less" lang="less" scoped>
  .register {
    margin: 30px 15px;
    text-align: center;

    a {
      display: inline-block;
      padding: 15px;
      color: #666;
    }

  }

</style>
